<template>
	<view class="zxh-guangchang">
		<!-- 顶部搜索按钮 -->
		<view class="zxh-guangchang-search" @click="goSearch">
			<u-icon name="search" color="#ffffff" size="30"></u-icon>
		</view>
		<!-- 头部选项卡 -->
		<view class="zxh-guangchang-tab">
			<ul>
				<li :class="tabOption==1?'tab-option':null" @click="tabOption=1">淘货</li>
				<li :class="tabOption==2?'tab-option':null" @click="tabOption=2">话题</li>
				<li :class="tabOption==3?'tab-option':null" @click="tabOption=3">公益</li>
			</ul>
		</view>
		<!-- 内容展示区 -->
		<view class="zxh-guangchang-root">
			<Taohuo v-show="tabOption==1"></Taohuo>
			<Huati v-show="tabOption==2"></Huati>
			<Gongyi v-show="tabOption==3"></Gongyi>
		</view>
		<tabBar :current-page="1"></tabBar>
	</view>
</template>

<script>
	import tabBar from '../../components/tabBar.vue';
	import Taohuo from './pages/Taohuo.vue';
	import Huati from './pages/Huati.vue';
	import Gongyi from './pages/Gongyi.vue';
	export default {
		components:{tabBar,Taohuo,Huati,Gongyi},
		data() {
			return {
				//控制头部选项卡和展示区状态
				tabOption:1,
			};
		},
		methods: {
			goSearch(){
				uni.navigateTo({
					url:"/pages/Square/pages/Search"
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
.zxh-guangchang{
	.zxh-guangchang-search{
		z-index: 999;
		position: fixed;
		top: 15upx;
		right: 20upx;
	}
	.zxh-guangchang-root{
		padding-bottom: 110upx;
	}
	.zxh-guangchang-tab{
		height: 90upx;
		ul{
			height: 90upx;
			padding: 0;
			border-bottom: 1upx solid #cccccc;
			li{
				width: 33.3%;
				height: 90upx;
				float: left;
				list-style: none;
				text-align: center;
				line-height: 90upx;
				font-size: 28upx;
			}
			.tab-option{
				height: 88upx;
				font-weight: 600;
				color: #28d2d1;
				border-bottom: 2upx solid #28d2d1;
			}
		}
	}
}

</style>